<template>
  <svg class="svg-icon" :fill="props.color" :width="width" :height="height" aria-hidden="true">
    <use :xlink:href="symbolId" :fill="props.color" />
  </svg>
</template>

<script setup lang="ts">
  import { computed } from 'vue'

  interface Props {
    name: string
    color?: string
    size?: string
    width?: number
    height?: number
  }
  const props = withDefaults(defineProps<Props>(), {
    name: '',
    color: 'currentColor',
    size: '1em',
    width: 0,
    height: 0
  })

  const symbolId = computed(() => `#icon-${props.name}`)
  const width = computed(() => (props.width ? props.width : props.size))
  const height = computed(() => (props.height ? props.height : props.size))
</script>

<style lang="less" scoped>
  .svg-icon {
    width: 1em;
    height: 1em;
    position: relative;
    fill: currentColor;
    vertical-align: -2px;
    outline: none;

    &.default-font-size {
      font-size: 14px;
    }
  }
</style>
